<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>离线视频上传</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style>
        .ry{
            margin: 6px 0px 2px 0px!important;
            letter-spacing: 2px!important;
        }
        .sj{
            margin: 4px 0px!important;
            font-size: 12px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: white;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb {
            background: #E6E6E6;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #E6E6E6;
        }

        ::-webkit-scrollbar-corner {
            background: #f6f6f6;
        }
    </style>
</head>
<body class="pear-container">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">视频名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="vname\@like" class="layui-input" id="vname" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="offline-query">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="offline-table" lay-filter="offline-table"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="offline-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="uploadVideo">
            <i class="layui-icon layui-icon-upload"></i>
            上传
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="offline-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="start" title="开始违章识别"><i class="layui-icon layui-icon-triangle-r"></i></button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
    </script>

    <script type="text/html" id="start-status">
        {{#if (d.status == 0) { }}
        <span>未开始</span>
        {{# }else if(d.status == 1){ }}
        <span>进行中</span>
        {{# }else if(d.status == 2){ }}
        <span>已结束</span>
        {{# } }}
    </script>
</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'toast'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var toast = layui.toast;
        var t=null;
        let MODULE_PATH = "${ctxPath}/offline/";
        let CAMERA_MANAGE_PATH = "${ctxPath}/api/camera/";

        let cols = [[
            {type: 'checkbox'},
            {title: '视频名称', field: 'vname', align: 'center'},
            {title: '大小(MB)', field: 'size', align: 'center'},
            {title: '视频', align: 'center',templet:function (d) {
                if (d.url!=''&&d.url!=undefined&&d.url!=null){
                    return '<span style="cursor: pointer"><i style="font-size: 20px!important; color: #06A39F!important;" title = "预览" onclick="offlineVideo(\''+d.url+'\',\''+d.vname+'\');" class="layui-icon layui-icon-video"></i></span>';
                }else{
                    return '<span style="cursor: pointer"><i style="font-size: 20px!important;" title = "预览" onclick="offlineVideo(\''+d.url+'\',\''+d.vname+'\');" class="layui-icon layui-icon-video"></i></span>';
                }
                }},
            {title: '人脸识别', field: 'ryCount', align: 'center',templet: function (d){
                    return '<a href="javascript:;" onclick="showRy('+d.id+',\''+d.vname+'\','+d.ryCount+')">&nbsp;&nbsp;'+d.ryCount+'&nbsp;&nbsp;</a>';
                }},
            {title: '违章数量', field: 'wzCount', align: 'center',templet: function (d){
                    return '<a href="javascript:;" onclick="showEvent('+d.id+',\''+d.vname+'\','+d.wzCount+')">&nbsp;&nbsp;'+d.wzCount+'&nbsp;&nbsp;</a>';
                }},
            {title: '状态', field: 'status', align: 'center', templet: '#start-status'},
            {title: '操作', toolbar: '#offline-bar', align: 'center', width: 180}
        ]];

        table.render({
            elem: '#offline-table',
            url: MODULE_PATH + 'data/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#offline-toolbar',
            defaultToolbar: "",
            height: 'full-180',
            done: function (res,index){
                for (var i in res.data){
                    if (res.data[i].status==1){
                        setTimeout(function (){
                            layui.table.reload("offline-table");
                        },10000);
                        return;
                    }
                }

            }
        });

        form.on('submit(offline-query)', function (data) {
            table.reload('offline-table', {
                where: data.field,page: {curr: 1}
            });
            return false;
        });

        table.on('tool(offline-table)', function(obj){
            if(obj.event === 'start'){
                if (obj.data.status===0){
                    window.startJx(obj);
                }else{
                    layer.msg("该状态不可操作！", {icon: 3, time: 1000});
                }
            } else if(obj.event === 'remove'){
                window.remove(obj);
            }
        });

        table.on('toolbar(offline-table)', function (obj) {
            if (obj.event === 'uploadVideo') {
                window.uploadVideo();
            } else if (obj.event === 'delete') {
                window.batchRemove(obj);
            }
        });

        window.uploadVideo = function() {
            layer.open({
                type: 2,
                title: '离线视频上传',
                shade: 0.5,
                area: ['900px', '500px'],
                content: MODULE_PATH + 'view/upload'
            });
        }

        window.offlineVideo=function (path,vname) {
            if (path!=''&&path!=undefined&&path!=null){
                var videoHtml = '<video height="500" width="850" controls autoplay autobuffer loop><source src="'+path+'" type="video/mp4"></source></video>';
                layer.open({
                    type: 1,
                    title: "离线视频预览 - "+vname,
                    shade: 0.3,
                    content: videoHtml,
                    offset: 'auto',
                })
            }
        }

        window.remove = function(obj){
            layer.confirm('确定要删除该记录？', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH+"remove?ids="+obj.data['id'],
                    dataType:'json',
                    type:'post',
                    success:function(result){
                        layer.close(loading);
                        if(result.code == 0){
                            layer.msg(result.message,{icon:1,time:1000},function(){
                                obj.del();
                            });
                        }else{
                            layer.msg(result.message,{icon:2,time:1000});
                        }
                    }
                })
            });
        }

        window.batchRemove = function(obj){
            let data = table.checkStatus(obj.config.id).data;
            if(data.length === 0){
                layer.msg("未选中数据",{icon:3,time:1000});
                return false;
            }
            let ids = "";
            for(let i = 0;i<data.length;i++){
                ids += data[i].id+",";
            }
            ids = ids.substr(0,ids.length-1);
            layer.confirm('确定要删除这些记录？', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove?ids=" + ids,
                    dataType:'json',
                    type:'post',
                    success:function(result){
                        layer.close(loading);
                        if(result.code == 0){
                            layer.msg(result.message,{icon:1,time:1000},function(){
                                table.reload('offline-table');
                            });
                        }else{
                            layer.msg(result.message,{icon:2,time:1000});
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('offline-table');
        }

        window.startJx=function(obj){
            var id=obj.data.id;
            var url=obj.data.url;
            layer.open({
                type: 2,
                title: "离线视频-开启违章识别",
                shade: 0.1,
                area: [common.isModile() ? '100%' : '600px', common.isModile() ? '100%' : '400px'],
                content: MODULE_PATH + "view/sf?id=" + id
            });
        }

        window.showEvent=function(id,name,count) {
            if (count==0){
                layer.msg("暂无违章！",{icon:7,time:1000});
            }else{
                layer.open({
                    type: 2,
                    title: "离线视频 ["+name+"] 违章列表",
                    shade: 0.1,
                    area: ['1200px','800px'],
                    content: MODULE_PATH + "view/showEvent?id=" + id
                });
            }
        }

        window.showRy=function (id,vname,count){
            if (count==0){
                layer.msg("暂无人员！",{icon:7,time:1000});
            }else{
                var html= " <div id=\"box_zyrx\" style=\"height: 450px;width: 800px; overflow: auto;margin: 10px 0\">";
                $.ajax({
                    url: MODULE_PATH + "data/getPersonOffline?offlineId="+id,
                    dataType: 'json',
                    async: false,
                    type: 'get',
                    success: function (result) {
                        if (result) {
                           for (var i in result){
                               html +="<div class=\"layui-col-md3 zyrx\" style='text-align: center;padding:5px 0'>" +
                                   "                        <div><img src=\"" + result[i].faceImage + "\" onerror='javascript:this.src=\"../../resource/wzgl/head.png\"' width=\"80px\" height=\"80px\"></div>" +
                                   "                        <div class=\"ry\">" + result[i].name + "</div>" +
                                   "                        <div class=\"sj\">" + layui.util.toDateString(result[i].createTime, 'MM-dd HH:mm') + "</div>" +
                                   "                    </div>"
                           }
                        }

                    }
                });
                html +="</div>";
                layer.open({
                    type: 1,
                    title: "离线视频人员识别 - "+vname,
                    shade: 0.3,
                    content: html,
                    offset: 'auto',
                })
            }
        }
    });
</script>
</html>